<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= VUE_APP_TITLE %></title>
    <style>
      .loading {text-align: center;padding: 20%;background: #EFF4FF;}
      h2 {color: #ccc;margin: 0;font: 1em verdana;text-transform: uppercase;letter-spacing: .1em;}
      .loading span {display: inline-block;vertical-align: middle;width: .6em;height: .6em;margin: .19em;
        background: #007DB6;border-radius: .6em;animation: loading 1s infinite alternate;}
      .loading span:nth-of-type(2) {background: #008FB2;animation-delay: 0.2s;}
      .loading span:nth-of-type(3) {background: #009B9E;animation-delay: 0.4s;}
      .loading span:nth-of-type(4) {background: #00A77D;animation-delay: 0.6s;}
      .loading span:nth-of-type(5) {background: #00B247;animation-delay: 0.8s;}
      .loading span:nth-of-type(6) {background: #5AB027;animation-delay: 1.0s;}
      .loading span:nth-of-type(7) {background: #A0B61E;animation-delay: 1.2s;}
      .loading span:nth-of-type(8) {background: #37C5C1;animation-delay: 1.4s;}
      @-webkit-keyframes loading {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }
      @keyframes loading {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }
    </style>
  </head>
  <body style='background: #EFF4FF;'>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="loading">
        <h2>loading</h2>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
